<template>
    <view  class="get-content">
    <image
      class="get-bg"
      src="@/static/answers/ag.png"
      style="height: 100%;"
    ></image>

    <image
        class="h-button-def"
        :class=" sizeStatus ? 'h-button':'h-button-samll'"  
        src="@/static/button/tip.png"
        mode="widthFix"
    ></image>

    <view :style="{ 'background-image': 'url(' + EnumBG.BU9 + ')' }"  class="show-content">{{answers}}</view>
    <view class="run" @click="run()"  :style="{ 'background-image': 'url(' + EnumBG.BU8 + ')' }">再问一次</view>
    <fui-loading v-if="loadingShow" type="col" isFixed></fui-loading>
  </view>
</template>

<script setup lang="ts">
import { EnumAnswers } from "../content";
import { EnumBG } from "@/utils/content";
const emit = defineEmits(['update:answersStatus'])
interface IProps {
  answers:string
}
withDefaults(defineProps<IProps>(), {})
const loadingShow = ref(false)
const sizeStatus = ref(false)
const run = ()=>{
  loadingShow.value = true
  emit('update:answersStatus',EnumAnswers.INPUT)
}
const startTimer = () => {
setInterval(() => {
    sizeStatus.value =  !sizeStatus.value
}, 1000); // 每秒执行一次
};
onMounted(()=>{
    startTimer();
})
</script>

<style lang="scss" scoped>
.get-content{
  width: 100%;
  height: 100%;
  .get-bg{
    width: 100%;
  }
  .h-button-def{
        position: absolute;
        z-index: 99;
        top: 61%;
        height: 170rpx;
        left: 47.5%;
    }
    .h-button{
        width: 42%;
        left: 57.5%;
        transition: all 1s;
    }
    .h-button-samll{
        width: 36%;
        left: 60%;
        transition: all 1s;
    }
  .show-content{
    position: absolute;
    width: 500rpx;
    height: 150rpx;
    top: 40%;
    left: 51.5%;
    transform: translateX(-50%);
    line-height:  150rpx;
    text-align: center;
    background-size: 100% 100%;
    color: white;
  }
  .run {
    position: absolute;
    width: 300rpx;
    height: 81rpx;
    top: 80.8%;
    left: 51.5%;
    transform: translateX(-50%);
    line-height:  81rpx;
    text-align: center;
    background-size: 100% 100%;
    color: white;
    padding-bottom: 10rpx;
    }
}
</style>
